/* stylelint-disable liberty/use-logical-spec */
.ftVideoPlayer {
  display: flex;
  position: relative;

  /*
    For vertical videos and full window mode the background is visible,
    so we want to make it black as it defaults to transparent
   */
  background-color: #000;

  /*
    Fixes the seek bar thumbnails causing a horizontal scroll bar
    to appear after exiting full screen and full window.
    But also vertically in case context menu overflows.
  */
  overflow: hidden;
}

.player {
  width: 100%;
}

.vrCanvas {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

:deep(.shaka-bottom-controls) {
  /*
    Force left to right, so that the UI doesn't break.
    With rtl, the progress bar was filling from the left, but the scrubber was moving from the right.
    video.js forced the direction for their controls too
  */
  direction: ltr;
}

.sixteenByNine {
  aspect-ratio: 16 / 9;
}

.stats {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 10px;
  border-radius: 5px;
  line-height: 1.4em;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  z-index: 2;

  /* user-select is intentionally not disabled, so that you can select and copy the stats */
}

.valueChangePopup {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 5px;
  font-size: 1.1em;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.valueChangePopup.invert-content-order {
  flex-direction: row-reverse;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.offlineWrapper {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  margin-inline-start: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.offlineIcon {
  font-size: 30px;
}

.offlineMessage {
  margin: 0;
}

.offlineMessageSubtitle {
  font-size: 0.8em;
}

.skippedSegmentsWrapper {
  position: absolute;
  right: 2%;
  bottom: max(15%, calc(46px + 2.5% + 3%)); /* 46px + 2.5% is the height of the controls */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.skippedSegment {
  margin-block: 0;
  padding: 10px;
  border-radius: 20px;
  background-color: rgb(0 0 0 / 80%);
  color: #fff;
}

:deep(.markerContainer) {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

:deep(.sponsorBlockMarker) {
  background-color: var(--primary-color);
}

:deep(.chapterMarker) {
  width: 2px;
  background-color: #000;
}

:deep(.sponsorBlockMarker),
:deep(.chapterMarker) {
  position: absolute;
  opacity: 0.6;
  height: 100%;
}

:deep(.playerFullscreenTitleOverlay) {
  display: none;
  opacity: 0;
  position: absolute;
  margin: 0;
  top: 5px;
  left: 5px;
  max-width: calc(100% - 10px);
  font-size: xx-large;
  color: #fff;
  font-weight: normal;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 5px;
  user-select: none;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;

  /* copied from .shaka-scrim-container */
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 0.6s;
}

:global(body[dir='rtl'] .playerFullscreenTitleOverlay) {
  left: initial;
  right: 5px;
}

.ftVideoPlayer:fullscreen :deep(.playerFullscreenTitleOverlay) {
  display: block;
}

:deep(.shaka-controls-container[shown='true'] > .playerFullscreenTitleOverlay) {
  opacity: 1;
}

:deep(.shaka-controls-container > .shaka-play-button-container > .shaka-play-button) {
  padding: min(calc(15% / 2), 55px);
}

:deep(.shaka-controls-button-panel>.ft-shaka-skip-button .material-svg-icon) {
  font-size: 32px;
}

.ftVideoPlayer:fullscreen :deep(.theatre-button),
.ftVideoPlayer:fullscreen :deep(.full-window-button),
.fullWindow :deep(.theatre-button) {
  display: none;
}

.fullWindow {
  position: absolute !important;
  max-width: initial !important;
  inset: 0;
  z-index: 1000;
}

.fullWindow > .player {
  width: 100%;
  height: 100%;
}

/* added to the body element */
:global(.playerFullWindow) {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

@media only screen and (width <=400px) {
  :deep(.shaka-text-container) {
    /* make subtitles take up slightly less space when a mobile phone is in portrait orientation */
    font-size: 16px !important;
  }
}

@media only screen and (width <=1000px) {
  :deep(.playerFullscreenTitleOverlay) {
    font-size: large;
  }
}

@media only screen and (width <=1350px) {
  :deep(.theatre-button) {
    display: none;
  }
}

@media (prefers-reduced-transparency) {
  :deep(.playerFullscreenTitleOverlay),
  .skippedSegment,
  .stats {
    background-color: rgb(0 0 0 / 90%);
  }
}

/* stylelint-enable liberty/use-logical-spec */
